<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <!-- jquery -->
    <script src="../js/jquery.min.js"></script>
    <!-- bootstrap -->
    <script src="../js/bootstrap3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css"/>
    <!-- bootstrap table -->
    <script src="../js/bootstrap-table/bootstrap-table.js"></script>
    <link rel="../js/bootstrap-table/bootstrap-table.css"/>
    <script src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- bootstrap 时间 -->
    <script src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <!-- bootstrap 弹框 -->
    <script src="../js/bootstrap-bootbox/bootbox.js"></script>

</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        高级搜索
    </div>
    <div class="panel-body">
        <div class="container-fluid">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="productName" class="col-sm-1 control-label">商品名称</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="productName"/>
                    </div>
                    <label for="typeId" class="col-sm-1 control-label">商品类型</label>
                    <div class="col-sm-2">
                        <select class="form-control" id="typeId">
                        </select>
                    </div>
                    <label for="productPrice" class="col-sm-1 control-label">价格</label>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <input type="text" class="form-control date" id="startPrice"/>
                            <div class="input-group-addon"><i class="glyphicon glyphicon-minus"></i></div>
                            <input type="text" class="date form-control" id="endPrice"/>
                        </div>
                    </div>
                    <div class="col-sm-1 col-sm-offset-1">
                        <button onclick="searchProduct()" type="button" class="btn btn-info "><i class="glyphicon glyphicon-search"></i>搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
     <div id="productTable"></div>
</body>
<script>
    //初始化
    $(function(){
        initProductTable();
        initProductType();
    })


    //条查：加载商品类型
    function initProductType(){
        $.post('../product/findProductType',{},function(data){
            var result = "<option value='-1'>请选择</option>"
            for (var i = 0; i < data.length; i++) {
                result += '<option value="'+data[i].typeId+'">'+data[i].typeName+'</option>';
            }
            $("#typeId").html(result);
        })
    }

    //条件查询
    function searchProduct(){
        var productName = $("#productName").val();
        var typeId = $("#typeId").val();
        var startPrice = $("#startPrice").val();
        var endPrice = $("#endPrice").val();
        $("#productTable").bootstrapTable("refresh",{
            query:{
                page:'1',
                productName:productName,
                typeId:typeId,
                startPrice:startPrice,
                endPrice:endPrice
            }
        });
    }

    //加载列表
    function initProductTable(){
        $("#productTable").bootstrapTable({
            url:'../product/findProductList',
            method:'post',
            contentType:'application/x-www-form-urlencoded',//post请求按照表单方式
            pagination:true,
            clickToSelect: true, //是否启用点击选中行
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//斑马线
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize
                };
            },
            columns:[
                {checkbox:true},
                {field:'id',title:'商品Id'},
                {field:'productName',title:'商品名称'},
                {field:'productImg',title:'商品图片',formatter:function(value,row,index){
                        return '<img src="'+value+'" width="50px" height="50px">'
                 }},
                {field:'productColor',title:'商品颜色'},
                {field:'typeName',title:'商品类型'},
                {field:'productPrice',title:'商品价格'},
               // {field:'stockNumber',title:'商品库存'},
                {field:'productState',title:'状态',formatter:function(value,row,index){
                     return value==1?'上架':(value==2?'下架': (value==3?'审核':(value==4?'审核失败':'')));
                }},
                {field:'cz',title:'操作',formatter:function(value,row,index){
                    var str='';
                    if(row.productState==1){
                        str+= '<a href="javascript:productState('+row.id+',1)">下架</a> | ';
                    }
                    if(row.productState==2){
                        str+= '<a href="javascript:productState('+row.id+',2)">上架</a> | ';
                    }
                    str += '<a href="javascript:delProduct('+row.id+')">删除</a>';
                    return str;
                }}
            ]
        })
    }

    //上下架
    function productState(productId,falg){
        $.post('../product/productState',{productId:productId,falg:falg},function(data){
            if(data){
                searchProduct();
            }else{
                bootbox.alert({
                    message:'操作失败',
                    size:'small'
                })
            }
        })
    }

    //删除商品
    function delProduct(productId){
        $.post('../product/delProduct',{productId:productId},function(data){
            if(data){
                searchProduct();
            }else{
                bootbox.alert({
                    message:'删除失败',
                    size:'small'
                })
            }
        })
    }
</script>
</html>